<template>
  <div class="sonPage mt-10">
    孙子组件:

    <h3 class="mt-10">第一种方法</h3>

    <div class="mt-10">{{ obj.msg + obj.num }}</div>

    <div class="mt-10">
      watch监听到值的变化了吗？
      {{ watchNum == 1 ? '没有' : '监听到了' }}
      监听到了{{ watchNum - 1 }}次改变
    </div>

    <h3 class="mt-10">第二种方法</h3>

    <div class="mt-10">第二种方法 {{ objes.msg }}</div>

    <div class="mt-10">
      watch监听到值的变化了吗？
      {{ watchNum == 1 ? '没有' : '监听到了' }}
      监听到了{{ watchNum - 1 }}次改变
    </div>
  </div>
</template>

<script>
export default {
  name: 'sonPages',
  components: {},
  props: {},
  data() {
    return {
      watchNum: 0,
    }
  },
  inject: {
    obj: {
      type: Object,
      default: () => ({}),
    },

    objs: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 第二种方法
    objes() {
      return this.objs
    },
  },
  watch: {
    obj: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue)
        this.watchNum += 1
        console.log('this.watchNum', this.watchNum)
        if (newValue.num == 0) {
          this.watchNum = 1
        }
      },
      immediate: true, // 进来就监听
      deep: true, // 深度监听
    },
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.sonPage {
  // height: 100%;
}
</style>
